<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线编辑</title>
    <style>
        #titleField input{
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="other"></div>
    <script>
        function EditInPlaceField(id,parent,value){
            this.id=id;
            this.parent=parent;
            this.value=value || 'default value';
            this.createElement();
            this.bindEvents();
        }
        EditInPlaceField.prototype.createElement=function(){
            // 1. 创建div
            // 2. 挂载 this.value createTextNode
            // 3. 挂载到 parent
            this.containerElement=document.createElement('div');

            this.containerElement.id=this.id;

            this.staticElement=document.createElement('span');
            this.staticElement.innerText=this.value;
            this.containerElement.appendChild(this.staticElement);
            // var text=document.createTextNode('华为可为');
            // this.containerElement.appendChild(text);

            this.filedElement = document.createElement('input');
            this.filedElement.value=this.value;
            this.filedElement.style.display='none';
            this.containerElement.appendChild(this.filedElement);

            this.saveButton=document.createElement('input');
            this.saveButton.type='button';
            this.saveButton.value='Save';
            this.containerElement.appendChild(this.saveButton);

            this.cancleButton=document.createElement('input');
            this.cancleButton.type='button';
            this.cancleButton.value='cancle';
            this.containerElement.appendChild(this.cancleButton);

            
            this.cancleButton.style.display='none';
            this.saveButton.style.display='none';

            this.parent.appendChild(this.containerElement);
        }
        EditInPlaceField.prototype.switchToEditState=function(){
            this.staticElement.style.display='none';
            this.filedElement.style.display='block';
            this.cancleButton.style.display='inline-block';
            this.saveButton.style.display='inline-block';
            this.filedElement.focus();
        }
        EditInPlaceField.prototype.switchToNormalState=function(){
            this.staticElement.style.display='block';
            this.filedElement.style.display='none';
            this.cancleButton.style.display='none';
            this.saveButton.style.display='none';
        }
        EditInPlaceField.prototype.doSave=function(){
            let newVal=this.filedElement.value;
            this.staticElement.innerText=newVal;
            this.value=newVal;
            this.switchToNormalState();
        }
        EditInPlaceField.prototype.bindEvents=function(){
            this.staticElement.addEventListener('click',this.switchToEditState.bind(this));
            this.cancleButton.addEventListener('click',this.switchToNormalState.bind(this));
            this.saveButton.addEventListener('click',this.doSave.bind(this));
        }
        var titleEditor=new EditInPlaceField('titleField',document.body,'华为可为');
        var titleEditor=new EditInPlaceField('newtitleField',document.getElementById('other'),'滴滴可为');
    </script>
</body>
</html>